.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}
.font-dpr(@font-size){
  font-size: @font-size;
  　[data-dpr="2"] & {
    font-size: @font-size * 2;
  }
  [data-dpr="3"] & {
    font-size: @font-size * 3;
  }
}
.zyHead{
  .px2rem(padding-bottom,40);
  .top{
    display: flex;
    justify-content: space-between;
    text-align: center;
    a{
     .px2rem(margin,30);
      .px2rem(width,70) ;
      .px2rem(height,70);
      background: #cccccc;
      border-radius: 50%;
      img{
        width: 30%;
        .px2rem(padding-top,20);
        .px2rem(padding-right,10);
      }
    }
    .touX{
      .px2rem(margin-top,40);
      .px2rem(margin-bottom,40);
      margin-right:2rem;
      width: 20%;
      img{
        width: 100%;
      }
    }
  }
  .zyRd{
    display: flex;
    align-items: center;
    h1{
     .font-dpr(13px);
      margin-left: 4rem;
    }
    span{
      background: #f5d447;
      .font-dpr(8px);
      color: white;
      .px2rem(padding,5);
      .px2rem(margin-left,10);
      .px2rem(margin-right,4);
    }
    p{
      background: #84daab;
      .font-dpr(8px);
      color: white;
      .px2rem(padding,5);
    }
  }
}
.fenS{
  display: flex;
  justify-content: center;
  span{
    .px2rem(padding-left,12);
    .px2rem(padding-right,12);
    color: #CCCCCC;
  }
}
.xuanx{
  display: flex;
  justify-content: center;
  text-align: center;
  .px2rem(margin-top,28);
  span{
    border: 1px solid #ccc;
    width: 18%;
    .px2rem(padding,10);
    .px2rem(margin,10);
  }
}
.pingJ{
  .px2rem(margin-top,24);
  display: flex;
  justify-content: space-around;
  .active{
    color:orangered;
    border-bottom: 4px solid #F5D447;
  }
  p{
    .px2rem(padding,22);
  }
}
.zhuye_btm{
  width: 50%;
  .px2rem(height,4);
  background: #F5D447;
  .px2rem(margin-top,22);
}
.souS{
  width: 90%;
  margin:0 auto;
  .px2rem(margin-top,20);
  background-color: #e0e0e0;
  border-radius:10px;
  display: flex;align-items: center;
  label{
    .px2rem(padding-left,30);
    width: 8%;
    img{
      width: 70%;
    }
  }
  input{
    width: 85%;
    .px2rem(padding,15);
    background-color: #e0e0e0;
    border: none;
  }
}
.nav{
  .px2rem(margin-top,18);
  ul{
    display: flex;
    justify-content:  space-around;
    .px2rem(height,80);
    li{
      width: 25%;
      text-align: center;
      border: 1px solid #CCCCCC;
      .px2rem(line-height,80);
      background:url(../images/homepage/xiala-1.png) right 7% bottom 20% no-repeat;
    }
    .shaiX{
      background: url(../images/homepage/shaixuan@3x.png) left 20% center no-repeat;
      .px2rem(background-size,20);
    }
  }
  .bottom{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    dl{
      width: 45%;
      img{
        width: 90%;
        display: block;
        margin:0 auto;
        .px2rem(margin-top,25);
      }
      dd{
        p{
          .px2rem(padding-left,20);
          .px2rem(padding-top,20);
          .px2rem(padding-bottom,20);
         .font-dpr(13px);
        }
        h2{
          .px2rem(padding-left,20);
        }
      }
    }
  }
}
